<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				text-align:center;
			}
			.center {
				margin-left: auto;
  				margin-right: auto;
			}
			.centered-text {
				text-align: center;
			}
			.centered-container {
  				display: flex;
  				flex-direction: column;
  				justify-content: flex-start;
  				align-items: center;
				justify-content: center;
				min-height: 100vh;
			}
			.application-icon {
  				display: block;
  				margin-left: auto;
  				margin-right: auto;
				max-width: 130px;
				max-height: 130px;
				width: auto;
				height: auto;
			}
			.spinner {
				max-width: 48px;
				max-height: 48px;
			}
		</style>
		<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)" />
		<link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light)" />
		<meta charset="utf-8">
		<link rel="icon" type="image/png" href="icon.png">
		{{if not .IsReleased}}
			<script src="webgl-debug.js"></script>
		{{end}}
		{{if .HasWasm}}
			<script>
				function getChromeVersion() {
					var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);

					return raw ? parseInt(raw[2], 10) : 0;
				}

				var wasmBuild = true;
				if (window.chrome) {
					if (getChromeVersion() < 106) {
						wasmBuild = false;
					}
				}
			</script>
		{{else}}
			<script>var wasmBuild = false;</script>
		{{end}}
		{{if .HasGopherJS}}
			<script>var gopherJSBuild = true;</script>
		{{else}}
			<script>var gopherJSBuild = false;</script>
		{{end}}
		<script>
			function async_load(file, cb) {
				var d = document, t = 'script',
      			o = d.createElement(t),
      			s = d.getElementsByTagName(t)[0];
  				o.src = file;
  				o.addEventListener('load', function (e) { cb(e); }, false);
  				s.parentNode.insertBefore(o, s);
			}

			function webgl_support () {
				try {
					var canvas = document.createElement('canvas');
					return !!window.WebGLRenderingContext &&
						(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'));
				} catch(e) {
					return false;
				}
			}

			function download_application() {
				var action = document.getElementById("action");
				var main = document.getElementById("main");

				if (webgl_support()) {
					if (wasmBuild && WebAssembly) {
						action.innerHTML = "Downloading wasm_exec.js"
						async_load("wasm_exec.js", function(){
							// WebAssembly.instantiateStreaming is not currently available in Safari
							if (WebAssembly && !WebAssembly.instantiateStreaming) { // polyfill
								WebAssembly.instantiateStreaming = async (resp, importObject) => {
									const source = await (await resp).arrayBuffer();
									return await WebAssembly.instantiate(source, importObject);
								};
							}

							action.innerHTML = "Downloading web assembly file.";

							const go = new Go();
							WebAssembly.instantiateStreaming(fetch("{{.WasmFile}}"), go.importObject).then((result) => {
								main.innerHTML = "";
								go.run(result.instance);
							});
						})
					} else if (gopherJSBuild) {
						action.innerHTML = "Downloading GopherJS file.";

						async_load("{{.GopherJSFile}}", function(){
							main.innerHTML = "";
						});
					} else {
						action.innerHTML = "WebAssembly is not supported in your browser";
						action.className = "action-error"
					}
				} else {
					action.innerHTML = "WebGL is not supported in your browser";
					action.className = "action-error"
				}
			}
		</script>
	</head>
	<body scroll="no" style="overflow: hidden" onload="download_application()">
		<div id="main">
			<div class="centered-container">
			<table class="center">
				<tr><td><img class="application-icon" src="icon.png" alt="Application icon"/></td></tr>
				<tr><td><div class="centered-text"><div class="application-name">{{.AppName}}</div></div></td></tr>
				<tr><td><div class="centered-text"><div class="application-version">v{{.AppVersion}}</div></div></td></tr>
				<tr>
					<td>
						<picture>
  							<source srcset="spinner_dark.gif" media="(prefers-color-scheme: dark)" />
  							<source srcset="spinner_light.gif" media="(prefers-color-scheme: light)" />
  							<img class="spinner" src="spinner_light.gif" />
						</picture>
					</td>
				</tr>
				<tr>
					<td>
						<div class="centered-text"><div class="action" id="action">
							<noscript>Javascript need to be enable for this application to work.</noscript>
						</div></div>
					</td>
				</tr>
			</table>
			</div>
		</div>
	</body>
</html>
